<template>
  <div class="saleDtail-container">
    <div class="saleContent"
         style="font-weight:bold;">
      <el-form :inline="true"
               class="demo-form-inline single-form-inline"
               size="small">
        <el-radio-group size="small"
                        v-model="selectMonth"
                        @change="timeSelect">
          <el-radio-button label="lastQuarter">最近3个月</el-radio-button>
          <el-radio-button label="lastMonth">最近1个月</el-radio-button>
        </el-radio-group>
        <el-form-item>
          <el-date-picker @change="daterange"
                          v-model="productType"
                          type="daterange"
                          size="small"
                          align="center"
                          value-format="yyyy-MM-dd"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="品类">
          <el-select v-model="categoryId"
                     placeholder="分类"
                     style="width: 156px;font-weight:bold;"
                     size="small"
                     @change="sortTopDataS">
            <el-option v-for="(item,index) in catagoryData"
                       :key="index"
                       :label="item"
                       :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="型号">
          <el-select v-model="productId"
                     placeholder="分类"
                     style="width: 156px;"
                     size="small"
                     @change="sortTopData">
            <el-option v-for="(item,index) in productData"
                       :key="index"
                       :label="item"
                       :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <circle-compent :detailCatagrayCount="detailCatagrayCount"
                    :detailProductCount="detailProductCount"
                    :detailOnLine="detailOnLine"
                    :detailOffLine="detailOffLine"
                    :titleName="titleName"></circle-compent>
    <div class="tableContainer saleContent">
      <el-table :data="results"
                style="width: 100%"
                size="mini">
        <el-table-column type="index"
                         width="80px"
                         label="序号">
        </el-table-column>
        <el-table-column prop="categoryName"
                         label="品类">
        </el-table-column>
        <el-table-column prop="productCode"
                         label="产品型号">
        </el-table-column>
        <el-table-column prop="retailPrice"
                         sortable
                         label="店铺/终端零售价(元)">
        </el-table-column>
        <el-table-column sortable
                         prop="amountCount"
                         :formatter="formatterPrice"
                         label="销售额(万元)">
        </el-table-column>
        <el-table-column sortable
                         prop="salesCount"
                         label="销售量(件)">
        </el-table-column>
        <!--<el-table-column-->
        <!--sortable-->
        <!--prop="percentage"-->
        <!--label="市场占有率">-->
        <!--</el-table-column>-->
      </el-table>
      <div class="paginationSet">
        <div class="pagination-container">
          <div class="toStart"
               @click="setCurrentPage">首页</div>
          <el-pagination background
                         layout="prev, pager, next"
                         @current-change="pageChange"
                         :current-page.sync="currentPage"
                         :total="page">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CircleCompent from 'router/marketSale/compentSet/circleCompent'
import * as opreator from 'api/getData'

export default {
  name: "sale-detail",
  components: {
    CircleCompent,
  },
  props: ['channelId'],
  data () {
    return {
      results: [],
      productId: '全部',
      productData: ['全部'],
      categoryId: '全部',
      catagoryData: ['全部'],
      detailCatagrayCount: '',
      detailProductCount: '',
      detailOnLine: '',
      detailOffLine: '',
      titleName: [
        '品类数（个）',
        '型号数（个）',
        '销售量（万件）',
        '销售额（万元）'
      ],
      selectMonth: 'lastQuarter',
      productType: '',
      currentPage: 1,
      page: 1
    }
  },
  mounted () {
    this.getData('lastQuarter')
    this.allC()
    this.allP()
  },
  methods: {
    formatterPrice (row, column) {
      return parseFloat((row.amountCount || 0) / 10000).toFixed(2)
    },
    sortTopDataS (val) {
      this.allP(val)
      this.sortTopData()
    },
    sortTopData (val) {
      this.getData(this.productType[0] ? this.productType[0] : this.selectMonth, this.productType[1], this.categoryId == '全部' ? undefined : this.categoryId, this.productId == '全部' ? undefined : this.productId)
    },
    timeSelect (val) {
      this.productType = ''
      this.getData(val, undefined, this.categoryId == '全部' ? undefined : this.categoryId, this.productId == '全部' ? undefined : this.productId)
    },
    allP (cName) {
      let param = { shopId: this.channelId, categoryName: cName == '全部' ? undefined : cName }
      opreator.offineCode(param).then(res => {
        this.productData = ['全部', ...res.data]
      })
    },
    allC () {
      opreator.offineCategory({ shopId: this.channelId }).then(res => {
        this.catagoryData = ['全部', ...res.data]
      })
    },
    getData (start, end, category, pcode) {
      let param = {
        firstTime: start,
        lastTime: end,
        shopId: this.channelId,
        productCode: pcode,
        categoryName: category,
        pageNumber: this.currentPage
      }
      opreator.offineDetail(param).then(res => {
        this.results = res.data.pageOffline.list
        this.page = res.data.pageOffline.totalRecord
        this.detailCatagrayCount = res.data.categoryNumber
        this.detailProductCount = res.data.productCodeNumber
        this.detailOnLine = (res.data.totalSalesCount / 10000).toFixed(2)
        this.detailOffLine = (res.data.totalSalesAmount / 10000).toFixed(2)
      })
    },
    daterange (val) {
      this.selectMonth = ''
      if (!this.productType) {
        this.productType = []
      }
      this.getData(this.productType[0], this.productType[1], this.categoryId == '全部' ? undefined : this.categoryId, this.productId == '全部' ? undefined : this.productId)
    },
    pageChange () {
      this.getData(this.productType[0] ? this.productType[0] : this.selectMonth, this.productType[1], this.categoryId == '全部' ? undefined : this.categoryId, this.productId == '全部' ? undefined : this.productId)

    },
    setCurrentPage () {
      this.currentPage = 1
      this.pageChange()
    }
  },
  watch: {
    channelId (newVal) {
      this.getData('lastQuarter')
    }
  }
}
</script>

<style scoped>
.saleContent {
  padding: 20px;
  box-sizing: border-box;
}
</style>
